<template>
  <el-dropdown trigger="click" @command="handleSetRole">
    <div class="switch-role">{{ roleName }} <i class="el-icon-arrow-down el-icon--right"/></div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-for="item in roleList" :key="item.id" :command="item.id" :v-model="item.name" :disabled="roleName === item.name">{{ item.name }}</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
export default {
  data() {
    return {
      roleName: ''
    }
  },
  computed: {
    roleList() {
      return this.$store.getters.rolesList
    }
  },
  created() {
    this.getRoleName()
  },
  methods: {
    getRoleName() {
      this.roleName = this.$store.getters.rolesName
    },
    handleSetRole(roleId) {
      const storeRoleList = this.$store.getters.rolesList || []
      if (storeRoleList.length > 0) {
        for (let a = 0; a < storeRoleList.length; a++) {
          if (storeRoleList[a].id === roleId) {
            this.$store.dispatch('setRoleName', { roles: storeRoleList[a].name, id: storeRoleList[a].id, code: storeRoleList[a].code })
            this.roleName = storeRoleList[a].name
            break
          }
        }
        // this.$message({
        //   message: '角色已切换成功',
        //   type: 'success'
        // });
        location.reload()
      }
    }
  }
}
</script>

<style scoped>
.switch-role {
  color: #ffffff;
  cursor: pointer
}
</style>

